<template>
  <Dialog
    v-model="dialogVisible"
    :close-on-press-escape="dialogCloseOnEsc"
    :max-height="590"
    :scroll="true"
    title="详情"
    :width="dialogWidth"
    @open="handleDialogOpen"
    @close="handleDialogClose"
  >
    <el-descriptions :column="1" :label-width="130" border>
      <el-descriptions-item label="日志编号">
        {{ detailData.id }}
      </el-descriptions-item>
      <el-descriptions-item label="接收邮箱">
        {{ detailData.toMail }}
      </el-descriptions-item>
      <el-descriptions-item label="用户信息">
        <dict-tag
          v-if="detailData.userType"
          :options="common_user_type"
          :value="detailData.userType"
        />
        <span v-if="detailData.userId">（{{ detailData.userId }}）</span>
      </el-descriptions-item>
      <el-descriptions-item label="邮件模板">
        {{ detailData.templateCode }}
      </el-descriptions-item>
      <el-descriptions-item label="邮件标题">
        {{ detailData.templateTitle }}
      </el-descriptions-item>
      <el-descriptions-item label="邮件内容">
        <template #label>
          <div @dblclick="toggleContentFullscreen">
            <Tooltip message="双击进行 邮件内容 全屏切换" title="邮件内容" />
          </div>
        </template>
        <div
          v-dompurify-html="detailData.templateContent"
          :style="{
            width: `${dialogWidth - 220}px`,
            maxHeight: '400px',
            overflow: 'auto'
          }"
          class="mail-content-container"
          :class="{ fullscreen: isContentFullscreen }"
        ></div>
      </el-descriptions-item>
      <el-descriptions-item label="邮件参数">
        {{ detailData.templateParams }}
      </el-descriptions-item>
      <el-descriptions-item label="发送邮箱">
        <template v-if="detailData.templateNickname">
          {{ detailData.templateNickname }}&lt;{{ detailData.fromMail }}&gt;
        </template>
        <template v-else>
          {{ detailData.fromMail }}
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="提交时间">
        {{ detailData.createTime }}
      </el-descriptions-item>
      <el-descriptions-item label="发送状态">
        <dict-tag :options="system_mail_send_status" :value="detailData.sendStatus" />
        {{ detailData.sendTime }}
      </el-descriptions-item>
      <el-descriptions-item label="发送返回编号">
        {{ detailData.sendMessageId }}
      </el-descriptions-item>
      <el-descriptions-item label="发送异常信息">
        <!--        <span>{{ detailData.sendException }}</span>-->
        <el-text type="danger">{{ detailData.sendException }}</el-text>
      </el-descriptions-item>
    </el-descriptions>
  </Dialog>
</template>

<script setup lang="ts">
import { MailLogVO } from '@/api/system/mail/mail_log'
import { DICT_TYPE } from '@/utils/dict'

defineOptions({ name: 'SystemMailLogDetail' })

const { common_user_type } = useDict(DICT_TYPE.common_user_type)
const { system_mail_send_status } = useIntDict(DICT_TYPE.system_mail_send_status)

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogCloseOnEsc = ref(true)
const dialogWidth = ref(1200) // 弹窗的是否展示
const detailData = ref() // 详情数据

/** 打开弹窗 */
const open = async (data: MailLogVO) => {
  dialogVisible.value = true
  isContentFullscreen.value = false
  detailData.value = data
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const isContentFullscreen = ref(false)
const toggleContentFullscreen = () => {
  isContentFullscreen.value = !isContentFullscreen.value
  dialogCloseOnEsc.value = !isContentFullscreen.value
}

const handleEscKey = async (event) => {
  if (event.key === 'Escape') {
    if (isContentFullscreen.value) {
      toggleContentFullscreen()
      event.stopPropagation()
    }
  }
}

const handleDialogOpen = () => {
  document.addEventListener('keydown', handleEscKey)
}

const handleDialogClose = () => {
  document.removeEventListener('keydown', handleEscKey)
}
</script>

<style scoped lang="scss">
/* 全屏模式 */
.mail-content-container.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  background: white !important;
}
</style>
